import React, { Fragment } from 'react';
import { Empty } from 'antd';
import { get as getPath } from 'object-path';
import ReactEcharts from '@/components/Echarts';
import Locale from '@/utils/locale';

const { locale } = new Locale('component.month');

const getOption = (list = [], pageLocale) => ({
    tooltip: {
        formatter(params) {
            let str = `${params[0].axisValue}<br/>`;
            params.forEach(item => {
                str += `${item.seriesName}：${item.value || 0}<br/>`;
            });
            return str;
        },
        trigger: 'axis'
    },
    legend: {
        y: 'bottom',
        data: list.map(item => item.name),
        itemGap: 16
    },
    xAxis: [
        {
            type: 'category',
            data: [
                locale('january'),
                locale('february'),
                locale('march'),
                locale('april'),
                locale('may'),
                locale('june'),
                locale('july'),
                locale('august'),
                locale('september'),
                locale('october'),
                locale('november'),
                locale('december')
            ],
            axisPointer: {
                type: 'shadow'
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(0,0,0,0.45)'
                }
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: pageLocale('zyg'),
            minInterval: 100,
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(0,0,0,0.45)'
                }
            }
        },
        {
            type: 'value',
            name: pageLocale('sl'),
            minInterval: 10,
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(0,0,0,0.45)'
                }
            }
        }
    ],
    series: list.map(item => ({
        name: item.name,
        type: item.name === pageLocale('zygs') ? 'line' : 'bar',
        data: item.value,
        minInterval: 1,
        yAxisIndex: item.name === pageLocale('zygs') ? 0 : 1
    }))
});
const Ryzs = ({ data, newLocale }) => {
    const { desc, list } = data;
    const block = (
        <p style={{ textAlign: 'center' }}>
            {getPath(desc, 'year', '--')} {newLocale('ryzsDes')}
            <span className="text-success"> {getPath(desc, 'average', '--')}</span>
            {newLocale('ryzsDes1')}
            <span style={{ color: '#FF4D4F' }}>{desc ? desc.max.replace('月', newLocale('month')) : '--'}</span>
        </p>
    );
    const element = (
        /* 如果只有一个月的数据时不显示 */
        <Fragment>
            {list && list[0] && list[0].value.filter(value => typeof value === 'number').length > 1 && block}
            <ReactEcharts option={getOption(list, newLocale)} />
        </Fragment>
    );
    return (
        <Fragment>
            {list && Object.keys(list).length > 0 ? element : <Empty style={{ margin: '82px 0' }} image={Empty.PRESENTED_IMAGE_SIMPLE} />}
        </Fragment>
    );
};

export default Ryzs;
